<template>
  <div>
    <div
      class="diy-nav-bar"
      :style="[
        `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
      ]"
    >
      <div
        class="diy-nav-bar-list"
        :class="
          'rows-' +
          diyItem.layout.rows_num +
          (diyItem.style.shade == 1 ? ' diy-style-shade' : '')
        "
        :style="[
          `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          `background: ${diyItem.style.bg_status == 1 ? diyItem.style.bg : ''}`,
          `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
        ]"
      >
        <div
          class="diy-nav-bar-item"
          v-for="(item, index) in diyItem.data"
          :key="index"
          @click="toLink(item.link)"
        >
          <image
            class="fade-show"
            :src="item.img"
            v-if="diyItem.layout.value == 1"
          ></image>
          <div
            class="diy-nav-bar-text"
            :class="item.fw == 1 ? 'fw' : ''"
            :style="{ color: item.color }"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts">
export default {
  name: "DiyNavBar",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import { diyLinkType, diyNavBarDataType } from "@/types";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyNavBarDataType;
  }>(),
  {
    diyItem: () => {
      return {
        layout: {
          value: 1,
          rows_num: 4,
        },
        style: {
          bg_status: 1,
          bg: "",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
  }
);

const toLink = (link:diyLinkType) => {
  $utils.routeRedirectTo(link)
}
</script>


<style scoped>
.diy-nav-bar .diy-nav-bar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  padding: 5px;
}
.diy-nav-bar .diy-nav-bar-list .diy-nav-bar-item {
  padding: 10rpx;
}
.diy-nav-bar .diy-nav-bar-list .diy-nav-bar-item image {
  width: 40px;
  height: 40px;
  margin-bottom: 5rpx;
}
.diy-nav-bar .diy-nav-bar-list .diy-nav-bar-item .diy-nav-bar-text {
  line-height: 40rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.diy-nav-bar .diy-nav-bar-list.rows-3 .diy-nav-bar-item {
  width: calc(33.33% - 20rpx);
}
.diy-nav-bar .diy-nav-bar-list.rows-4 .diy-nav-bar-item {
  width: calc(25% - 20rpx);
}
.diy-nav-bar .diy-nav-bar-list.rows-5 .diy-nav-bar-item {
  width: calc(20% - 20rpx);
}
</style>
